<template>
  <PageWrapper dense>
    <BasicTable @register="register">
      <template #toolbar>
        <a-button type="primary" @click="handlePush" :disabled="!state.canPublish" :loading="state.pushLoading">推送</a-button>
        <TableAction />
      </template>
    </BasicTable>
    <div class="content">
      <div class="text" v-if="state.showHistory">
        <div class="text-title">
          <BasicTitle>推送结果：</BasicTitle>
          <a-button class="btn" type="primary" size="small" @click="handleDownload"
            >下载结果</a-button
          >
        </div>
        <div class="text-content">{{ state.batchReusult }}</div>
      </div>
      <div class="text">
        <div class="text-title">
          <BasicTitle>推送结果：</BasicTitle>
          <a-button class="btn" type="primary" size="small" @click="handleRefresh"
            >刷新状态</a-button
          >
        </div>
        <div class="text-content">推送中，请等待推送结果才能再次推送</div>
      </div>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onActivated, reactive} from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './pushData';
  import { getPushGoodPager, exportBatchResult, pushGoods, getLastBatchResult } from '/@/api/telecom/telecom';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';

  interface State {
    showHistory: boolean;
    batchReusult: string;
    canPublish: boolean;
    pushLoading: boolean;
  }

  export default defineComponent({
    name: 'DocumentsList',
    components: { BasicTable, PageWrapper },
    emits: ['success', 'error'],
    setup(_, {}) {
      const { createMessage } = useMessage();
      const state = reactive<State>({
        showHistory: true,
        batchReusult: '',
        canPublish: true,
        pushLoading: false,
      });
      var lastBatch = {};
      const [register, { getRawDataSource, setProps, getForm, reload }] = useTable({
        api: getPushGoodPager,
        columns: getBasicColumns(),
        useSearchForm: true,
        formConfig: getFormConfig(),
        striped: false,
        showIndexColumn: false,
        canResize: false,
        bordered: true,
        fetchSetting: {
          pageField: 'pageIndex',
          sizeField: 'pageSize',
          totalField: 'totalCount',
          listField: 'list',
        },
        afterFetch() {
          const raw = getRawDataSource();
          const title =
            '本次共发布商品' + raw.totalCount + '个 ' + ' (只有开放平台上架的商品才能推送)';
          state.canPublish = raw.canPublish;
          setProps({
            title: title,
          });
        },
      });
      onActivated(() => {
        fetchLastBatch();
      });
      async function fetchLastBatch() {
        const res = await getLastBatchResult();
        lastBatch = res;
        state.showHistory = lastBatch.totalCount > 0 ? true : false;
        state.batchReusult =
          '推送成功' + lastBatch.successCount + '个,推送失败' + lastBatch.failCount + '个';
      }

      /**
       * @description: 推送
       */
      async function handlePush() {
        state.pushLoading = true;
        const fieldsValue = getForm().getFieldsValue();
        const res = await pushGoods({ applyReason: fieldsValue.value });
        state.pushLoading = false;
        if (res === true) {
          createMessage.success('推送成功');
          fetchLastBatch();
        }
      }
      function handleRefresh() {
        console.log('刷新');
        reload();
        fetchLastBatch();
      }
      async function handleDownload() {
        const res = await exportBatchResult({ batchNo: lastBatch.batchNo });
        if (res === true) {
          createMessage.success('导出成功');
        }
      }

      return {
        register,
        getPushGoodPager,
        handlePush,
        getRawDataSource,
        setProps,
        handleRefresh,
        handleDownload,
        lastBatch,
        fetchLastBatch,
        state,
      };
    },
  });
</script>

<style scoped>
  .content {
    margin: 0 16px;
    background-color: #fff;
    display: flex;
    height: 130px;
  }
  .text {
    padding-left: 10px;
    padding-top: 16px;
    color: black;
    font: 28px;
    font-weight: 800px;
    width: 500px;
  }
  .text-title {
    padding-right: 20px;
  }
  .text-content {
    margin-top: 20px;
  }
  .btn {
    margin-left: 10px;
    margin-top: 10px;
  }
</style>
